<template>
    <div>
        <el-dialog title="权限设置" :visible.sync="dialogTreeVisible">
            <el-tree
                    :data="permissions"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :props="defaultProps">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTreeVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateRolePermissions">确 定</el-button>
            </div>
        </el-dialog>
        <el-table
                :data="roles"
                style="width: 100%">
            <el-table-column
                    label="ID"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="描述"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.description }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="站点id"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.siteId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="showPermssionTree(scope.row.id)">权限</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "RoleView",
        data(){
            return {
                roles:null,              //角色集合
                permissions:null,        //所有权限集合
                dialogTreeVisible:false, //权限树对话框的隐藏和显示
                defaultProps: {
                    children: 'childPermissions',   //子节点集合
                    label: 'name'                   //节点名
                },
                roleId:0, //当前选中的角色id
            }
        },
        methods:{
            //查询
            loadRoles(){
                //axios调用分页查询接口
                this.axios.get("roles")
                    .then(result => {  //请求成功的回调
                        console.log("role",result);
                        this.roles = result.data.data;
                    });
                //查询权限树
                this.axios.get("permission-tree")
                    .then(result => {
                        console.log("permssion",result);
                        this.permissions = result.data.data;
                    });
            },
            //显示角色设置权限对话框
            showPermssionTree(roleId){
                this.dialogTreeVisible = true;
                this.roleId = roleId;
                //根据角色id查询权限的id
                this.axios.get("permission-ids/"+roleId)
                    .then(result => {
                        console.log(result.data);
                       if(result.data.code == 200){
                           //选中角色的权限
                           this.$refs.tree.setCheckedKeys(result.data.data);
                       }
                    });
            },
            //修改权限
            updateRolePermissions(){
                console.log(this.$refs.tree.getCheckedKeys());
                this.axios.put("role-permissions","roleId="+this.roleId+"&permissionIds=" + this.$refs.tree.getCheckedKeys())
                    .then(result => {
                        console.log(result);
                    });
                this.dialogTreeVisible = false;
            }
        },
        mounted() {
            this.loadRoles();
        }
    }
</script>

<style scoped>

</style>
